<template>
	<view class="nav-bar-container">
	    <view class="nav-bar-box" :style="{height:navHeight,backgroundColor:bgColor,opacity:opacity}">
	        <view class="status-bar" :style="{height: deviceInfo.statusBarHeight+'px'}"></view>
	        <view class="nav-content" :style="{height:navContentHeight,paddingLeft:navPadding,paddingRight:navPadding}">
	            <view class="nav-left-box" :style="{height:navContentHeight}">
	                <view class="nav-left" :style="{width:navContentHeight,height:navContentHeight}" v-if="!hideBack">
	                    <image @tap="goBack" class="back-icon" mode="aspectFit" src="../../static/icons/navback.png"></image>
	                </view>
	                <slot name="left"></slot>
	            </view>
	            <text class="nav-title cu-text-ellipsis">{{title?title:''}}</text>
	            <view class="nav-right-box">
	                <view class="nav-right" :style="{width:navContentHeight,height:navContentHeight}" v-if="!hideBack"></view>
	            </view>
	        </view>
	    </view>
	    <view class="nav-fill" :style="{height:navHeight}" v-if="!transparent"></view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				deviceInfo: uni.getSystemInfoSync(),
				//navContentHeightNum:40,
				//navContentHeight:'',
				//navPadding:'',
				//opacity:'',
				//bgColor:'',//'rgba(20,20,20,0)',
				//navHeight:0,
				//statusBarHeight:'',
				menuButtonInfo:uni.getMenuButtonBoundingClientRect(),
				//minScrollHeight:400,
				backdropFilter:"blur(10px)"
			};
		},
		created() {
			//this.deviceInfo = JSON.parse(JSON.stringify(uni.getStorageSync('deviceInfo')))
			//this.navHeight = (parseInt(this.deviceInfo.statusBarHeight)+parseInt(this.navContentHeight))+"px"
			//console.log(uni.getStorage('deviceInfo'),'---------------------')
			//console.log(this.menuButtonInfo,'------------------------')
		},
		methods:{
			goBack:function(){
				uni.navigateBack()
			}
		},
		props: {
			title: {
				type: String,
				default: ""
			},
			hideBack: {
				type: Boolean,
				default: !1
			},
			transparent: {
				type: Boolean,
				default: !1
			},
			scrollTop: {
				type: Number,
				default: 0
			}
		},
		computed: {
			navHeight: function() {
				console.log(this.menuButtonInfo.bottom + 4 + "px",'测试Debug')
				return this.menuButtonInfo.bottom + 4 + "px";
			},
			navContentHeight: function() {
				return this.menuButtonInfo.bottom + 4 - this.deviceInfo.statusBarHeight + "px";
			},
			navPadding: function() {
				return this.deviceInfo.screenWidth - this.menuButtonInfo.right + "px";
			},
			bgColor: function() {
				console.log(this.transparent)
				if (this.transparent) {
					var t = this.scrollTop / 100;
					return t > .8 && (t = .8), "rgba(20,20,20,".concat(t, ")");
				}
				return "rgba(20, 20, 20, 0.8)";
			},
			opacity: function() {
				return 1;
				if (this.transparent) {
					var t = this.scrollTop / 100;
					return t > 1 && (t = 1), t;
				}
				return 1;
			}
		}
	}
</script>

<style>
	.nav-bar-container,.status-bar {
	    width: 750rpx;
	}
	
	.nav-bar-box {
	    backdrop-filter: blur(10px);
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    flex-direction: column;
	    position: fixed;
	    top: 0;
	    z-index: 99999;
	}
	
	.nav-bar-box,.nav-content {
	    width: 750rpx;
	    display: flex;
	}
	
	.nav-content {
	    -webkit-box-pack: justify;
	    justify-content: space-between;
	}
	
	.nav-content,.nav-left-box {
	    -webkit-box-align: center;
	    align-items: center;
	}
	
	.nav-left-box {
	    display: flex;
	    width: 175rpx;
	}
	
	.nav-right-box {
	    width: 175rpx;
	}
	
	.nav-left {
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	}
	
	.nav-title {
	    width: 400rpx;
	    text-align: center;
	    font-size: 32rpx;
	    color: #fff;
	    font-weight: 700;
	    left: 0;
	}
	
	.nav-fill {
	    width: 750rpx;
	}
	
	.back-icon {
	    width: 80%;
	    height: 80%;
	}
</style>
